<template>
  <div style="display: inline-block; text-align: left">
    <el-button type="success" title="用户详情" @click="getUserDetail()">用户详情</el-button>
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" width="900px" title="用户详情" @close="close">
      <el-form ref="row_data" :model="user" title="用户详情" label-position="left" label-width="100px" style="width: 750px; margin-left:50px;">
        <el-form-item :label="'id'" prop="id">
          <span>{{ user.id }}</span>
        </el-form-item>
        <el-form-item :label="'openID'" prop="openid">
          <span>{{ user.openid }}</span>
        </el-form-item>
        <el-form-item :label="'头像'" prop="avatarUrl">
          <img v-if="user.avatarUrl" :src="user.avatarUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-form-item>
        <el-form-item :label="'昵称'" prop="nickName">
          <span>{{ user.nickName }}</span>
        </el-form-item>
        <el-form-item :label="'真实姓名'" prop="realName">
          <span>{{ user.realName }}</span>
        </el-form-item>
        <el-form-item :label="'性别'" prop="gender_name">
          <span>{{ user.gender_name }}</span>
        </el-form-item>
        <el-form-item :label="'国家'" prop="country">
          <span>{{ user.country }}</span>
        </el-form-item>
        <!--<el-card shadow="never">-->
        <!--<div style="float: left;margin-bottom: 10px;font-size: 16px" class="clearfix">-->
        <!--<strong><span>订单信息</span></strong>-->
        <!--</div>-->
        <!--<el-table :key="tableKey" :data="order" border fit highlight-current-row style="width: 100%;">-->
        <!--<el-table-column align="center" label="交易订单数">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.id }}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column align="center" label="交易总额">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.orderNo }}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column align="center" label="退单数">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.originalPrice }}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column align="center" label="退单总额">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.postage }} </span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column align="center" label="实际交易总额">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{ scope.row.discountsPrice }} </span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--</el-card>-->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import store from '@/store'
import { getUserDetail } from '@/api/user/user'
// import { get_user_trading_info } from '@/api/order/order'
import { client } from '@/utils/alioss'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Number,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      select_gender: [{
        value: '0',
        label: '未知'
      }, {
        value: '1',
        label: '男'
      }, {
        value: '2',
        label: '女'
      }],
      list: [],
      tableKey: 0,
      userDetail: [],
      user_details: [],
      ship: null,
      order: [],
      user: {},
      listLoading: true,
      dialogTableVisible: false,
      id: null,
      content: null
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return (isJPG | isPNG) && isLt2M
    },
    upload_avatarUrl(file) {
      const that = this
      const fileName = 'user-user-avatarUrl' + file.file.uid
      client().put(fileName, file.file).then((res) => {
        this.$set(that.user, 'avatarUrl', res.url)
        that.$message.success('图片上传成功！')
      }).catch((err) => {
        that.$message.error('图片上传失败，原因：' + err)
      })
    },
    getUserDetail() {
      this.dialogTableVisible = true
      this.listLoading = true
      this.id = this.row_data
      getUserDetail(store.getters.token, { user_id: this.id }).then(response => {
        console.log('response.data.data', response.data.data)
        this.user = response.data.data
        console.log('this.user', this.user)
        this.listLoading = false
      })
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  //   get_user_trading_info() {
  //
  //   }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand.el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 75%;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
